<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息——会话</title>
    <script src="../../js/flexible.js"></script>
    <link rel="stylesheet" href="../../css/common/base.css">
    <link rel="stylesheet" href="../..//css/common/header-footer.css">
    <link rel="stylesheet" href="../../css/cl/common.css">
    <link rel="stylesheet" href="../../css/cl/huihua.css">
</head>
<body>
    <!-- 头部------------------- -->
    <header>
        <div class="header_top">
            <img src="../../img/信号组.png" alt="">
            <span class="header_time">上午 9:51</span>
            <span class="ht_right">
                <img src="../../img/蓝牙图标.png" alt="">
                <img src="../../img/电量百分比.png" alt="">
                <img src="../../img/电量图标.png" alt="">
            </span>
        </div>
        <div class="header_bottom">
            <div class="hb_left">
                <img src="../../img/返回按钮-1.png" alt="" id="return">
                <!-- 需要更改title文字 -->
                <span class="title">&nbsp;消息</span>
            </div>
            <div class="hb_right">
                <img src="../../img/组 -1.png" alt="">
            </div>
        </div>
    </header>
     <!-- 头部 -->
     <div class="header"></div>
    <!-- title -->
    <div class="mingzi">
        <span id="lixiaohong">李晓红</span>
        <span id="tianjia">+QQ好友</span>
    </div>
    <div class="empty"></div>
    <!-- main -->
    <div class="main">
        <p class="date">15:54</p>
        <div class="xiaoxi">
            <span class="touxiang"></span>
            <div class="huihuakuang">
                <div class="xiaojiao"></div>
                <p class="duihua">
                    你好
                </p>
            </div>
        </div>
        <div class="xiaoxi">
            <span class="touxiang"></span>
            <div class="huihuakuang">
                <div class="xiaojiao"></div>
                <p class="duihua chang">我想咨询一下学校这边中国移动的套餐是什么样的</p>
            </div>
        </div>
        <p class="date">16:34</p>
        <div class="xiaoxi1">
            <span class="touxiang1"></span>
            <div class="huihuakuang1">
                <div class="xiaojiao1"></div>
                <p class="duihua1">抱歉，我是学校营业厅中国电信的推广，移动那边不太了解</p>
            </div>
        </div>
        <p class="date">16:54</p>
        <div class="xiaoxi">
            <span class="touxiang"></span>
            <div class="huihuakuang">
                <div class="xiaojiao"></div>
                <p class="duihua chang">那我们可以先加个QQ好友吗？</p>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer" id="shangyi">
        <div class="footer_top">
            <span class="jiahao" id="other"></span>
            <span class="shuru"></span>
            <span class="fasong">发送</span>
        </div>
        <ul class="footer_bottom">
            <li>
                <span></span>
                <span>相册</span>
            </li>
            <li>
                <span></span>
                <span>相机</span>
            </li>
        </ul>
    </div>
</body>
<script>
    var other = document.getElementById("other");
    var shangyi = document.getElementById("shangyi");
    var bottomnum = 0;
    var temp = 0;
    other.addEventListener("click",function(){
        if(temp == 0){
            shangyi.style.bottom = 0.3 + "rem";
            temp = 1;
        }else{
            shangyi.style.bottom = -2.1533 + "rem";
            temp = 0;
        }
    });
    // 返回
    var fanhui = document.getElementById("return");
    fanhui.addEventListener("click",function(){
        window.history.back(-1);
    });
</script>
<script>
    var  lixiaohong= document.getElementById("lixiaohong");
    lixiaohong.addEventListener("click",function(){
        window.location.href="../trm/grxingxi.html";
    });
</script>
</html>